<template>
<div>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="查看综合信息" name="first">
              <el-table
                :data="booksList"
                height="250"
                border
                style="width: 100%">
                <el-table-column
                prop="descSellBuy"
                label="卖书/买书"
                width="100">
                </el-table-column>
                <el-table-column
                prop="bookName"
                label="书籍名"
                width="180">
                </el-table-column>
                <el-table-column
                prop="bookVersion"
                label="书籍版本"
                width="100">
                </el-table-column>
                <el-table-column
                prop="bookAuthor"
                label="编者">
                </el-table-column>
                <el-table-column
                prop="bookPublish"
                label="出版社">
                </el-table-column>
                <el-table-column
                prop="bookDiscount"
                label="是否打折">
                </el-table-column>      
                <el-table-column 
                style="color: red"
                prop="bookPrice"
                label="价格">
                </el-table-column>
                <el-table-column
                prop="contact"
                label="联系方式">
                </el-table-column>
                <el-table-column
                prop="dateTime"
                label="发布时间">
                </el-table-column>     
            </el-table>
            </el-tab-pane>
            <el-tab-pane label="发布书籍信息" name="second">
                <div>
                    <el-form :model="bookForm" :rules="rules" ref="bookForm" label-width="80px" class="demo-ruleForm">
                        <el-form-item label="书籍作者" prop="authorName">
                            <el-input v-model="bookForm.bookAuthor"></el-input>
                        </el-form-item>
                        <el-form-item label="书籍名" prop="bookName">
                            <el-input v-model="bookForm.bookName"></el-input>
                        </el-form-item>
                        <el-form-item label="是否打折" prop="discount">
                            <el-select v-model="bookForm.bookDiscount" placeholder="请选择折扣">
                            <el-option label="不打折" value="不打折"></el-option>
                            <el-option label="一折" value="一折"></el-option>
                            <el-option label="两折" value="两折"></el-option>
                            <el-option label="三折" value="三折"></el-option>
                            <el-option label="四折" value="四折"></el-option>
                            <el-option label="五折" value="五折"></el-option>
                            <el-option label="六折" value="六折"></el-option>
                            <el-option label="七折" value="七折"></el-option>
                            <el-option label="八折" value="八折"></el-option>
                            <el-option label="九折" value="九折"></el-option>              
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="书籍价格"
                            prop="bookPrice"
                            :rules="[
                                { required: true, message: '价格不能为空'},
                                { type: 'number', message: '价格必须为数字值'}
                            ]"
                        >
                            <el-input type="price" v-model.number="bookForm.bookPrice" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="出版社" prop="publish">
                            <el-input v-model="bookForm.bookPublish"></el-input>
                        </el-form-item>
                        <el-form-item label="版本" prop="version">
                            <el-input v-model="bookForm.bookVersion"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式" prop="contact">
                            <el-input v-model="bookForm.contact"></el-input>
                        </el-form-item>
                        <el-form-item label="是否卖出" prop="sellOrBuy">
                            <el-switch v-model="bookForm.sellOrBuy"></el-switch>
                        </el-form-item>           
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('bookForm')">发布</el-button>
                            <el-button @click="resetForm('bookForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>          
        </el-tabs>
    </div>
    
</div>
</template>

<script>
export default {
    name: "BooksComplex",
    data() {
      return {
        booksList:[],
        bookForm: {
          bookAuthor: '',
          bookDiscount: '',
          bookName: '',
          bookPrice: '',
          bookPublish:'',
          bookVersion: '',
          contact: '',
          sellOrBuy: true,        
        },
        activeName:'first',
        rules: {          
          bookName: [
            { required: true, message: '请输入书籍名称', trigger: 'blur' },
          ],          
          contact: [
            { required: true, message: '请输入本人联系方式', trigger: 'blur' },
          ],
          sellOrBuy: [
            { required: true, message: '请选择需求书籍方式', trigger: 'change' },
          ],
        }
      };
    },
    mounted() {
      this.initBooks()
    },
    methods: {
      initBooks() {
        let page = 1;
        this.getRequest('/books/Books?page='+page).then((resp) => {
          if (resp) {
            this.booksList = resp;
            console.log(resp)
          }
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.putRequest("/books/insertBooks", this.bookForm).then((resp) => {
                if(resp) {
                    console.log(resp)
                }
            })
          } else {
            this.$message.error("请输入所有字段");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
}
</script>

<style>

</style>